<template>
  <div class="project-time" v-loading="loading">
    <div class="project-time-item">
      <div class="project-time-item-title">
        <div class="desc1">{{$t('setting.projectManageTime.tip1')}}</div>
        <div class="desc2">{{$t('setting.projectManageTime.tip2')}}</div>
      </div>
      <el-switch
        v-model="openTime"
        @change="changeOpenTime"
        :active-text="openTime ? $t('common.base.enable') : $t('common.base.disable')"
      ></el-switch>
    </div>
  </div>
</template>

<script>
/* vue*/
import { defineComponent, reactive, toRefs, onMounted } from 'vue'
/* api*/
import { updateTenantConfigById, getTenantConfigByCodeList } from '@src/api/SettingApi'
/* util*/
import { toast } from '@src/util/platform'
export default defineComponent({
  name: "ProjectManageTime",
  setup() {

    const state = reactive({
      openTime: false,
      loading: false,
    })

    async function init() {
      try {
        state.loading = true;
        const { success, data, message } = await getTenantConfigByCodeList({codeList: ['projectTaskTimeSetting']})

        if(!success) return toast(message, 'error')

        state.openTime = data?.[0]?.isOpen == 1
      } catch (e) {
        console.error(e)
      } finally {
        state.loading = false;
      }
    }

    async function changeOpenTime(val) {
      try {
        const { success, message } = await updateTenantConfigById({
          code: 'projectTaskTimeSetting',
          isOpen: val ? 1 : 0,
          configNumValue: 0
        })

        if(!success) return toast(message, 'error')
      } catch (e) {
        console.error(e)
      }
    }

    onMounted(() => {
      init()
    })

    return {
      ...toRefs(state),
      changeOpenTime,
    }
  }
})
</script>

<style scoped lang="scss">
.project-time {
  margin: 12px;
  padding: 12px;
  background: white;
  border-radius: 8px;

  &-item {
    display: flex;
    justify-content: space-between;
    align-items: center;

    &-title {
      .desc1 {
        font-size: 15px;
        font-weight: 600;
        color: $text-color-primary;
      }
      .desc2 {
        font-size: 12px;
        font-weight: 400;
        color: $text-color-secondary;
        margin-top: 8px;
      }

    }
  }
}
</style>